<template>
  <div style="background-color: #eaedf1; overflow: hidden;">
    <el-card style="margin: 20px 30px 100px 30px;">
      <el-row type="flex" justify-content="between" >
          <el-col :span="9">
            <el-form :inline="true" style="width:800px" :model.sync="formData">
              <el-input clearable v-model="formData.directory_name" size="small" style="width:200px; margin-right: 20px;" placeholder="目录名称"></el-input>
              <el-select style="width:200px; margin-right: 20px;" v-model="formData.subject_id" size="small" placeholder="归属学科">
              <el-option v-for="item in treeList"
               :key="item.id" 
               :label="item.name" 
               :value="item.id"
               ></el-option>
            </el-select>
            <el-select v-model="formData.is_show" size="small" placeholder="显示状态">
              <el-option v-for="item in options"
               :key="item.value" 
               :label="item.label" 
               :value="item.value"
               ></el-option>
            </el-select>
          </el-form>
          </el-col>
            <el-col :span="22">
              <el-button @click="initData" plain type="primary" style="margin-left: 200px;" size="small">搜索</el-button>
              <el-button @click="clear" size="small">重置</el-button>
            </el-col>
          <el-col :span="2">
              <el-button @click="addDirectoryHandler" icon="el-icon-plus" size="small" type="primary" plain>创建目录</el-button>
          </el-col>
      </el-row>
      <br>
      <!-- 表格区域 -->
      <el-table border  :data="list">
        <el-table-column align="center" width="80px" type="index" label="序号"></el-table-column>
        <el-table-column align="center" width="80px" label="目录ID" prop="id"></el-table-column>
        <el-table-column align="center" label="目录名称" prop="directory_name"></el-table-column>
        <el-table-column align="center" label="目录图标" prop="directory_icon">
          <template slot-scope="scope">
            <span v-if="scope.row.directory_icon === ''">暂无</span>
            <img width="30%" v-else :src="scope.row.directory_icon" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="归属学科" prop="subject_name"></el-table-column>
        <el-table-column align="center" label="创建人" prop="username"></el-table-column>
        <el-table-column align="center" label="是否显示">
          <template slot-scope="scope">
            <el-switch
            @change="showChange(scope.row.id,scope.row.is_show)"
              :value="scope.row.is_show"
              active-color="#13ce66"
              active-text="是"
              inactive-text="否"
              :active-value="1"
              :inactive-value="2"
              >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签数量">
          <template slot-scope="scope">
            <span v-if="scope.row.tag_num !== 0">
              <el-link @click="linkHandler(scope.row)" type="primary">
                {{scope.row.tag_num}}
                <i class="el-icon-link el-icon--right"></i>
              </el-link>
            </span>
            <span v-else>0</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="editHandler(scope.row,2)" circle type="primary" size="small" icon="el-icon-edit"></el-button>
            <el-button @click="delHandler(scope.row.id)" circle type="danger" size="small" icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <br/>
      <!-- 分页咯 -->
      <el-row type="flex" justify="end">
        <el-pagination
      right
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      :current-page.sync="formData.page"
      :page-sizes="[10, 15, 20]"
      :page-size="formData.limit"
      layout=" total,sizes, prev, pager, next, jumper"
      :total="count"
      ></el-pagination>
      </el-row>
    </el-card>
  <add-directory @updateList="initData" ref="addDirectory" :treeList="treeList"/>
  </div>
</template>

<script>
import { getDirectoryListApi, getDirectorytreeApi, changeShowApi, delDirectoryApi } from '@/api/directory'
import addDirectory from './components/add-directory'
export default {
  /* 组件name部分 */
  name: 'Directory',
  components: {
    addDirectory
  },

  /* data数据部分 */
  data() {
    return {
      /* 请求数据携带的对象数据 */
      formData: {
        subject_id: '',
        directory_name: '',
        is_show: '',
        page: 1,
        limit:10
      },
      /* 渲染表单数组 */
      list: [],
      /* 页数 */
      count: 0,
      //this is 显示状态下拉数组
      options: [
        {
          value: 1,
          label:'显示'
        },
        {
          value: 2,
          label:'隐藏'
        }
      ],
      /* 树形结构总数据 */
      treeList: [],
      /* 接收路由跳转传递的数据 用于筛选对应数据渲染页面 */
      queryData: this.$route.query.formData,
      queryData_id: this.$route.query.id
    };
  },
 /* 页面创建之后调用获取数据方法 */
  created() {
    this.initData()
  },
 /* 监听queryData 如果有变化 那就是上一个页面点击link标签路由跳转来的 */
  watch: {
    queryData: {
      handler(newVal, oldVal) {
        if (this.queryData_id === 1) {
          // this.formData.subject_id =
          // console.log(newVal);
          // 把路由传过来的参数赋值给对应的formData属性,调用方法获取数据 渲染页面
          this.formData.subject_id = newVal.id
          this.initData()
        }
      },
      immediate:true
    }
  },
  methods: {
    //获取页面基本数据
    async initData() {
      //获取表单数据
      let { list, total } = await getDirectoryListApi(this.formData) 
      this.list = list
      this.count = total
      //获取下拉框数据
      let  data  = await getDirectorytreeApi()
      this.treeList = data
      // console.log(data);
    },
    //分页咯
    handleSizeChange(val) {
            this.formData.limit = val
            this.initData()
    },
    // 分咯
    handleCurrentChange(val) {
            this.formData.page = val
            this.initData()
    },
    //重置
    clear() {
      this.formData = {
        subject_id: '',
        directory_name: '',
        is_show: '',
        page: 1,
        limit:10
      },
      this.initData()
    },
    //新增目录
    addDirectoryHandler() {
      // console.log(666);
      //先重置表单
      this.$refs.addDirectory.formData = {
        directory_icon: '',
        directory_name: '',
        is_show: '',
        sort: 1,
        subject_id:''
      }
      //打开dialog组件
      this.$refs.addDirectory.dialogShow = true
    },
    //修改
    editHandler(val,type) {
      // console.log(666);
      //通过形参type来判断是修改还是新增
      if (type === 2) {
        //回显
        this.$refs.addDirectory.formData = val
        this.$refs.addDirectory.dialogShow = true
      }
    },
    //删除
    async delHandler(id) {
      // console.log(666);
        await this.$confirm('真的要删嘛┭┮﹏┭┮')
        await delDirectoryApi(id)
        //如果当前页面就一条数据 你还给删了 那就page--
        if (this.formData.page > 1 && this.list.length === 1) {
          this.formData.page--
        }
        this.$message.success('删除成功啦!(*^▽^*)')
        this.initData()
    },
    //切换隐藏显示状态
    async showChange(id,show) {
      try {
        let gaga = show == 1 ? 2 : 1
        await changeShowApi({ id: id, is_show: gaga })
        this.$message.success('切换成功啦啦啦啦(*^▽^*)')
        this.initData()
      } catch (error) {
        console.log(error);
      }      
    },
     //路由跳转 传数据
    linkHandler(row) {
      // console.log(row);
      this.$router.push({
        path: '/subject/tag',
        query: {queryData:row,id:2}
      })
    }

  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
 border-bottom: 1px solid #ebebeb;
}
</style>